<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <div>
      <div class="mobile-dumber">
        <div class="mobile-dumber2">
          <div class="qw">视频生成</div>
          <div class="storyboard">Storyboard</div>
        </div>
      </div>
    </div>
    <svg
      class="frame"
      width="243"
      height="233"
      viewBox="0 0 243 233"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M48.6 34.95C42.1553 34.95 35.9745 37.4048 31.4174 41.7744C26.8602 46.144 24.3 52.0705 24.3 58.25V174.75C24.3 180.93 26.8602 186.856 31.4174 191.226C35.9745 195.595 42.1553 198.05 48.6 198.05H194.4C200.845 198.05 207.026 195.595 211.583 191.226C216.14 186.856 218.7 180.93 218.7 174.75V58.25C218.7 52.0705 216.14 46.144 211.583 41.7744C207.026 37.4048 200.845 34.95 194.4 34.95H48.6ZM194.4 174.75H48.6L97.2 81.55L133.65 151.45L157.95 104.85L194.4 174.75Z"
        fill="#567DF4"
      />
    </svg>

    <div class="group-4163">
      <div class="rectangle5"></div>
      <div class="text">动漫、现实、电影、胶片、科幻、艺术家...</div>
      <div class="l2">风格选择</div>
      <div class="group-7341">
        <div class="rectangle6"></div>
        <div class="text2">16:9、9：16、2.35：1、4：3....</div>
        <div class="ll3">视频尺寸</div>
        <svg
          class="chevron-down"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 9L12 15L18 9"
            stroke="black"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      <div class="group-7342">
        <div class="rectangle7"></div>
        <div class="text3">推、拉、摇、移动、旋转、升、降</div>
        <div class="ll4">镜头运动</div>
        <svg
          class="chevron-down2"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 9L12 15L18 9"
            stroke="black"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div>
    <div class="group-4164">
      <div class="rectangle8"></div>
      <div class="text4">option</div>
      <div class="ll5">画面描述</div>
      <div class="group-7341">
        <div class="rectangle9"></div>
        <div class="text5">4、8、12、16...</div>
        <div class="ll6">生成时长</div>
        <svg
          class="chevron-down3"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 9L12 15L18 9"
            stroke="black"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      <div class="group-7342">
        <div class="rectangle10"></div>
        <div class="text6">推、拉、摇、移动、旋转、升、降</div>
        <div class="ll7">画面质量</div>
        <svg
          class="chevron-down4"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 9L12 15L18 9"
            stroke="black"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div>
    <div class="button-square-2-big-1-primary">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary2">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <router-link to="/gen_movie" class="button-text2">生成</router-link>
    <router-link to="/" class="button-text3">保存</router-link>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.not-data {
  position: absolute;
  inset: 0;
}
.mobile-dumber {
  width: 188.02px;
  height: 19px;
  position: static;
}
.mobile-dumber2 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 188.02px;
  position: absolute;
  left: 196px;
  top: 248px;
}
.qw {
  color: var(--_03, #22215b);
  text-align: center;
  font: 700 14px "Manrope", sans-serif;
  position: relative;
}
.storyboard {
  color: var(--_04, #9090ad);
  text-align: center;
  font: 500 14px "Manrope", sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame {
  position: absolute;
  left: 168px;
  top: 258px;
  overflow: visible;
}
.group-4163 {
  position: absolute;
  inset: 0;
}
.rectangle5 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 491px;
  top: 303px;
}
.text {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Manrope", sans-serif;
  position: absolute;
  left: 508px;
  top: 317px;
}
.l2 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 498px;
  top: 276px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.group-7341 {
  width: 327px;
  height: 77px;
  position: static;
}
.rectangle6 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 491px;
  top: 390px;
}
.text2 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 508px;
  top: 404px;
}
.ll3 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 498px;
  top: 363px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down {
  position: absolute;
  left: 778px;
  top: 403px;
  overflow: visible;
}
.group-7342 {
  width: 327px;
  height: 77px;
  position: static;
}
.rectangle7 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 491px;
  top: 477px;
}
.text3 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 508px;
  top: 491px;
}
.ll4 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 498px;
  top: 450px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down2 {
  position: absolute;
  left: 778px;
  top: 490px;
  overflow: visible;
}
.group-4164 {
  position: absolute;
  inset: 0;
}
.rectangle8 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 866px;
  top: 303px;
}
.text4 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Manrope", sans-serif;
  position: absolute;
  left: 883px;
  top: 317px;
}
.ll5 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 873px;
  top: 276px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.rectangle9 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 866px;
  top: 390px;
}
.text5 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 883px;
  top: 404px;
}
.ll6 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 873px;
  top: 363px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down3 {
  position: absolute;
  left: 1153px;
  top: 403px;
  overflow: visible;
}
.rectangle10 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 866px;
  top: 477px;
}
.text6 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 883px;
  top: 491px;
}
.ll7 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 873px;
  top: 450px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down4 {
  position: absolute;
  left: 1153px;
  top: 490px;
  overflow: visible;
}
.button-square-2-big-1-primary {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 196px;
  top: 488px;
}
.group-12 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.button {
  background: #3056d3;
  border-radius: 6px;
  width: 94px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 48px;
  left: 46px;
  bottom: 2px;
  top: 15px;
}
.button-square-2-big-1-primary2 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 308px;
  top: 488px;
}
.button-text2 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 1182px;
  left: 225px;
  bottom: 280px;
  top: 496px;
}
.button-text3 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 1069px;
  left: 338px;
  bottom: 280px;
  top: 496px;
}
</style>
